import React, { forwardRef, useMemo } from 'react';
import ReactEChartsCore from 'echarts-for-react/lib/core';
import * as echarts from 'echarts/core';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
} from 'echarts/components';
import { BarChart as EBarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import './index.scss';

echarts.use([TitleComponent, TooltipComponent, LegendComponent, GridComponent, EBarChart, CanvasRenderer]);

export interface StationAreaDataItem {
  name: string;
  value: number;
}

export interface StationAreaSummaryProps {
  /**
   * 组件标题
   */
  title?: string;
  
  /**
   * 英文标题
   */
  englishTitle?: string;
  
  /**
   * 总计面积
   */
  totalArea?: number;
  
  /**
   * 面积单位
   */
  areaUnit?: string;
  
  /**
   * 图表数据
   */
  chartData?: StationAreaDataItem[];
  
  /**
   * 图表宽度
   */
  chartWidth?: number | string;
  
  /**
   * 图表高度
   */
  chartHeight?: number | string;
  
  /**
   * Y轴最大值
   */
  yAxisMax?: number;
  
  /**
   * 柱条宽度
   */
  barWidth?: string | number;
  
  /**
   * 图表点击事件
   */
  onChartClick?: (params: any) => void;
  
  /**
   * 点击事件
   */
  onClick?: () => void;
  
  /**
   * 自定义样式
   */
  style?: React.CSSProperties;
  
  /**
   * 自定义类名
   */
  className?: string;
  
  // 低代码平台相关属性
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const StationAreaSummary = forwardRef<HTMLDivElement, StationAreaSummaryProps>((props, ref) => {
  const {
    title = '站体面积汇总',
    englishTitle = 'Station area summary',
    totalArea = 1225675,
    areaUnit = '平方米',
    chartData = [
      { name: '站台东侧', value: 38000 },
      { name: '站台北侧', value: 38000 },
      { name: '站台西侧', value: 38000 },
      { name: '商业北', value: 38000 },
      { name: '商业东', value: 38000 },
      { name: '站厅西北侧', value: 38000 },
      { name: '站厅西南侧', value: 38000 },
      { name: '站厅东侧', value: 38000 },
      { name: '7-11车站', value: 38000 },
      { name: '7-11车站', value: 38000 },
      { name: '7-11车站', value: 38000 },
      { name: '7-11车站', value: 38000 },
      { name: '7-11车站', value: 38000 }
    ],
    chartWidth = 460,
    chartHeight = 220,
    yAxisMax = 40000,
    barWidth = 20,
    onChartClick,
    onClick,
    style = {},
    className = '',
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const handleClick = () => {
    onClick?.();
  };

  const handleChartClick = (params: any) => {
    onChartClick?.(params);
  };

  const componentClassName = [
    'hzdz-station-area-summary',
    className
  ].filter(Boolean).join(' ');

  const chartOption = useMemo(() => {
    const color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#58FFF6' },
      { offset: 1, color: 'rgba(88, 255, 246, 0.1)' }
    ]);

    return {
      backgroundColor: 'transparent',
      grid: {
        left: '40px',
        right: '20px',
        top: '20px',
        bottom: '60px',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: chartData.map(item => item.name),
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.2)'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, 0.6)',
          fontSize: 10,
          rotate: 45,
          margin: 15
        }
      },
      yAxis: {
        type: 'value',
        max: yAxisMax,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, 0.6)',
          fontSize: 10,
          formatter: (value: number) => {
            if (value >= 10000) {
              return `${value / 10000}万`;
            }
            return value.toString();
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)',
            type: 'dashed'
          }
        }
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: '#58FFF6',
        textStyle: {
          color: '#FFFFFF'
        },
        formatter: (params: any) => {
          const data = params[0];
          return `${data.name}<br/>${data.value} ${areaUnit}`;
        }
      },
      series: [
        {
          type: 'bar',
          data: chartData.map(item => item.value),
          itemStyle: {
            color: color,
            borderRadius: [2, 2, 0, 0]
          },
          barWidth: barWidth,
          label: {
            show: false
          }
        }
      ]
    };
  }, [chartData, yAxisMax, barWidth, areaUnit]);

  return (
    <div
      ref={ref}
      className={componentClassName}
      style={style}
      onClick={handleClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      {/* 顶部标题栏 */}
      <div className="hzdz-station-area-summary__header">
        <div className="hzdz-station-area-summary__header-content">
          <div className="hzdz-station-area-summary__title">{title}</div>
          <div className="hzdz-station-area-summary__english-title">{englishTitle}</div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="hzdz-station-area-summary__content">
        {/* 总计面积区域 */}
        <div className="hzdz-station-area-summary__summary">
          <div className="hzdz-station-area-summary__summary-indicator"></div>
          <div className="hzdz-station-area-summary__summary-label">总计面积</div>
          <div className="hzdz-station-area-summary__summary-value">{totalArea.toLocaleString()}</div>
          <div className="hzdz-station-area-summary__summary-unit">{areaUnit}</div>
        </div>

        {/* 图表区域 */}
        <div className="hzdz-station-area-summary__chart">
          <ReactEChartsCore
            echarts={echarts}
            option={chartOption}
            style={{ width: chartWidth, height: chartHeight }}
            onEvents={{
              click: handleChartClick
            }}
          />
        </div>
      </div>
    </div>
  );
});

StationAreaSummary.displayName = 'StationAreaSummary';

export default StationAreaSummary;